<template>
  <div>
    <el-card class="table-card">
      <div slot="header" class="clearfix">
        <h4>上下限管理-查看</h4>
      </div>
      <el-form class="reson-form" size="mini" ref="resonForm" :model="resonForm" label-width="75px">
        <el-form-item label="调整原因:">
          <el-input maxlength="200" disabled :rows="1" type="textarea" v-model="resonForm.launchReason"></el-input>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button
          type="primary"
          size="mini"
          :loading="btnLoading.export"
          @click="handleExportDetails"
        >导出明细
        </el-button>
      </el-row>
      <BasicTable
        isCustomSort
        showPagination
        :defaultMinWidth="100"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="480"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
        @customSortChange="handleSortTable"
      />
      <FooterFields :footerFields="viewdata" />
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { VIEW_TABLE_COLUMNS } from '../constants';
import { setAuthBtnId, createExcelByExport, generateUuid } from '@/utils/bizUtils';
import FooterFields from '@/pages/commodity/components/FooterFields';
import {
  queryRecordLimitDetailDataService,
  exportProductLimitRecordDetailService,
} from '@/api/stock/upperLowerLimits';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    BasicTable,
    FooterFields
  },
  data () {
    return {
      viewdata: {},
      tableInfo: {
        list: [],
        columns: VIEW_TABLE_COLUMNS,
        loading: false,
      },
      pageSizes: [10, 100, 1000],
      recordNo: '',
      sortType: 0,
      resonForm: {
        launchReason: ''
      },
      btnLoading: {
        export: false
      }
    }
  },
  computed: {
    noData () {
      return this.tableInfo.list.length === 0;
    },
  },
  mounted () {
    const { recordNo } = this.$route.query
    if (recordNo) {
      this.recordNo = recordNo
      this.getTableData()
    }
  },
  methods: {
    // 导出明细
    async handleExportDetails () {
      const data = { recordNo: this.recordNo }
      const loadingFn = state => { this.btnLoading.export = state }
      const res = await exportProductLimitRecordDetailService(data, loadingFn)
      createExcelByExport({ excelTitle: `上下限管理-查看明细_${generateUuid()}`, res })
    },
    // 表格排序 1 降序 0 升序
    handleSortTable (data) {
      const { order } = data
      if (order == 'descending') {
        this.sortType = '1';
      } else if (order == 'ascending') {
        this.sortType = '0';
      }
      this.getTableData()
    },
    // 获取表格数据
    async getTableData () {
      const data = {
        ...this.paginationParams,
        recordNo: this.recordNo,
        sortType: this.sortType,
      };
      setAuthBtnId();
      const res = await queryRecordLimitDetailDataService(data, state => { this.tableInfo.loading = state });
      if (res?.retData) {
        const {
          recordNo,
          commitStateStr,
          pusherName,
          pushTime,
          pusherDeptName,
          pusherAreaName,
          reason,
          launchReason,
          productUpdateCommitRecordLimitDetailVoPager
        } = res.retData;
        this.viewdata = {
          recordNo,
          commitStateStr,
          pusherName,
          pushTime,
          pusherDeptName,
          pusherAreaName,
          reason,
        }
        this.resonForm.launchReason = launchReason;
        const { totalNum, results } = productUpdateCommitRecordLimitDetailVoPager;
        this.tableInfo.list = results;
        this.total = totalNum;
      }
    },
  }
}
</script>
